<template>
  <div class="indexContainer">
    <p class="tip">欢迎进入红领巾训练营</p>
    <img v-if="isShow" class="user_img" :src="userInfo.avatarUrl" alt="">
    <button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" class="login">点击登录</button>
    <P class="userName">Welcome! {{userInfo.nickName}}</P>
    <div class="goHome" @click="goHome">
      <p>开启变强之旅</p>
    </div>
  </div>
</template>

<script>
import globalStore from "../../stores/global-store";
export default {
  data () {
    return {
      userInfo: {},
      isShow: false
    }
  },
  methods: {
    getUserInfo(data) {
      wx.getUserInfo({
        success: (data) => {
          console.log(data);
          this.userInfo = data.userInfo;
          this.isShow = true;
          globalStore.state.userInfo = data.userInfo;
          globalStore.state.isLogin = true;
          // console.log(globalStore.state.userInfo)
        },
        fail: () => {
          console.log('获取失败');
        }
      }),
        wx.login({
          success(res){
            // console.log("res.code:" + res.code)
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session',
              data: {
                appid: 'wx2acede8eb64a7db1',
                secret: 'f9ed6d18659e0bd6ba9b69a6d5ed9985',
                js_code: res.code,
                grant_type: 'authorization_code'
              },
              methods: "GET",
              success(res){
                // console.log(res.data)
                // console.log('openid:'+res.data.openid)
                globalStore.state.openId = res.data.openid
                console.log(globalStore.state.openId)
              }
            })
          }
        })
    },
    goHome() {
      wx.switchTab({
        url: '/pages/home/main'
      })
    }
  }
}
</script>

<style scoped>
.indexContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #669999;
}

.user_img,
.login {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin: 100px;
  font-size: 16px;
  line-height: 100px;
  background-color: #CCCCCC;
}

.userName {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}

.goHome {
  width: 110px;
  height: 40px;
  border: 1px solid #eee;
  background: #CCFFFF;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  padding: 0 8px;
}

.tip {
  margin-top: 30px;
  font-size: 22px;
  color: #990033;
}
</style>
